<template>
  <div class="dynamic-text" :style="{ fontSize: computedFontSize + 'px' }">
    {{ text }}
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, watch } from 'vue'

export default defineComponent({
  name: 'DynamicText',
  props: {
    text: {
      type: String,
      required: true
    },
    containerWidth: {
      type: Number,
      required: true
    }
  },
  setup(props) {
    const computedFontSize = computed(() => {
      // 假设每个字符占固定比例的宽度
      const characterCount = props.text.length
      if (characterCount === 0) return 46 // 默认字体大小
      const maxFontSize = 46 // 最大字体大小限制
      const minFontSize = 12 // 最小字体大小限制
      const fontSize = Math.min(
        maxFontSize,
        Math.max(minFontSize, (props.containerWidth / characterCount) * 1.5)
      )
      return fontSize
    })

    return {
      computedFontSize
    }
  }
})
</script>

<style>
.dynamic-text {
  width: 100%; /* 容器宽度 */
  white-space: nowrap; /* 防止文字换行 */
  text-align: center; /* 居中显示 */
  overflow: hidden; /* 防止溢出 */
}
</style>
